<template>
  <el-dialog
    :title="role ? '新增角色' : '编辑角色'"
    :visible="visible" 
    :width="500"
    @close="handleClose"  
  >
    <el-form
      ref="roleFormRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="mt-4"
    >
      <!-- 角色名称 -->
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="formData.roleName"
          placeholder="请输入角色名称"
          maxlength="50"
        />
      </el-form-item>

      <!-- 角色描述 -->
      <el-form-item label="角色描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入角色描述（可选）"
          type="textarea"
          :rows="3"
          maxlength="200"
        />
      </el-form-item>

       <!-- 状态 -->
      <el-form-item label="状态" prop="isActive">
        <el-switch
          v-model="formData.isActive"
          :active-value="true"
          :inactive-value="false"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 接收父组件参数
const props = defineProps({
  role: {
    type: Object,
    default: null
  },
  visible: {  // 仅作为显示/隐藏的状态传递（单向）
    type: Boolean,
    default: false
  }
})

// 向父组件emit事件
const emit = defineEmits(['updateVisible', 'save'])

// 表单引用
const roleFormRef = ref(null)

// 表单数据
const formData = reactive({
  // id: '',
  roleName: '',
  description: '',
  isActive: true  // 默认状态为启用
})

// 表单校验规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度在2-50个字符之间', trigger: 'blur' }
  ]
})

// 监听角色数据变化（编辑时回显）
watch(
  () => props.role,
  (newVal) => {
    if (newVal) {
      formData.id = newVal.id
      formData.roleName = newVal.roleName
      formData.description = newVal.description || ''
      formData.isActive = newVal.isActive // 更新状态            
    } else {
      Object.keys(formData).forEach(key => {
        formData[key] = ''
      })
      formData.isActive = true  // 重置状态为启用
    }
  },
  { immediate: true }
)

// 处理弹窗关闭（通知父组件更新visible状态）
const handleClose = () => {
  emit('updateVisible', false)  // 触发更新事件
  roleFormRef.value?.resetFields()  // 重置表单
}

// 提交表单
const handleSubmit = async () => {
  try {
    await roleFormRef.value.validate()
    emit('save', { ...formData })  // 提交数据    
    handleClose()  // 关闭弹窗
  } catch (err) {
    console.log('表单校验失败', err)
    ElMessage.error('请完善角色信息')
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 16px;
}
</style>